<template>
	<view class="game-history-container">
		
		<view class="header-bar">
			<view class="header-left">
				<view class="back-button" @click="rightClick">
					<image class="back-icon" src="../../../static/img/left.png"></image>
				</view>
			</view>
		</view>

		
		<view class="game-banner">

		</view>

		
		<view class="tabs-navigation">
			<view class="tab-item " :class="{ active: tabActive === 1 }" @click="changTab(1)">
				<text class="tab-text">{{ t('Week') }}</text>
			</view>
			<view class="tab-item" :class="{ active: tabActive === 2 }" @click="changTab(2)">
				<text class="tab-text">{{ t('Month') }}</text>
			</view>
		</view>

		
		<view class="history-table-container">
			<up-list style="height: 100%" @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in baseData.indexList" :key="index + 1">
					<view class="table-body">
						<view class="table-row">
							<view class="rank-cell">
								<view class="number-badge" :class="getNumberColorClass(index)">
									<text class="number-text">{{index+1 }}</text>
								</view>
							</view>
							<view class="identifier-cell">
								<text class="identifier-text">{{item.RegAc }}</text>
							</view>
							<view class="amount-cell">
								<text class="amount-text">{{symbol}}{{ convertNumbers(item.Total,exchangeRate) }}</text>
							</view>
						</view>
					</view>
				</up-list-item>
				<up-list-item>
					<view class="load-more-section">
						<view class="load-more-button">
							<text class="load-more-text">{{ t('Reached the End') }}</text>
						</view>
					</view>
				</up-list-item>
			</up-list>
		</view>

	</view>
</template>

<script setup defer async lang="ts">
	import { reactive, onMounted, ref, onUnmounted, onBeforeUnmount } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { marking } from '@/api/user'
	import { onLoad } from '@dcloudio/uni-app'
	import { convertNumbers } from '@/utils/utils'
	import { useSwipeHandlers } from '@/utils/useSwipeHandlers'

	
	const country = ref(1);
	const exchangeRate = ref(1);
	const symbol = ref('$')
	const query = ref({})
	const { t } = useI18n()

	
	onLoad((options) => {
		query.value = options || {}
	})

	const baseData = reactive({
		type: 1, 
		indexList: [] as any[],
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
	})
	const tabActive = ref(1);
	const rightClick = () => {
	window.top?.postMessage('/pages/index/index', window.location.origin)
	uni.navigateTo({
	  url: '/pages/index/index',
	})
	}

	const changTab = (e : any) => {
		baseData.type = e;
		tabActive.value = e;
		getList()
	}

	const scrolltolower = () => {
		
		console.log('')
	}

	const getList = async () => {
		uni.showLoading({
			title: t('Loading'),
			icon: 'none',
		})
		let params : any = {
			type: baseData.type,
		}
		try {
			const res = await marking(params)
			if (res.code == 0) {
				baseData.indexList = res.data
			}
		} catch (error) {
			console.error(':', error)
		} finally {
			uni.hideLoading()
		}
	}

	
	const getNumberColorClass = (number : number) => {
		if (number === 1 || number === 3 || number === 5 || number === 9) return 'green-number'
		if (number === 4 || number === 8) return 'red-number'
		return 'purple-number'
	}

	
	const getColorClass = (color : string) => {
		if (color === 'green') return 'green-color'
		if (color === 'red') return 'red-color'
		return 'purple-color'
	}

	
	const handleSwipeRight = () => {
		const pages = getCurrentPages()
		if (pages.length <= 1) {
			history.back()
		} else {
			uni.navigateBack()
		}
	}

	useSwipeHandlers(handleSwipeRight)

	onMounted(() => {
		
		uni.setNavigationBarTitle({
			title: 'Studio !' + t('Earn money so easy') + '!', 
		})
		symbol.value = uni.getStorageSync('symbol') || '₹';
		country.value = uni.getStorageSync('country') || 1;
		exchangeRate.value = uni.getStorageSync('exchangeRate') || 1;
		getList()
	})
</script>

<style lang="scss" scoped>
	@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

	.game-history-container {
		width: 100%;
		min-height: 100vh;
		background-color: #94c720;
		background-image: url("@/static/img/lottery_bj.png");
		background-size: 100% 100%;
		position: relative;
		overflow: hidden;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	
	.game-history-container::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image:
			radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
			radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
			radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
		pointer-events: none;
		z-index: 0;
	}

	
	.header-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		position: relative;
		z-index: 2;

		.header-left {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.back-button {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.back-icon {
					width: 30px;
					height: 30px;
				}
			}

		}

	}

	
	.game-banner {
		margin: 10rpx;
		border-radius: 20rpx;
		background-image: url("@/static/img/list.png");
		background-size: 100% 100%;
		padding: 180rpx;
		position: relative;
		z-index: 2;

	}

	
	.tabs-navigation {
		display: flex;
		margin: 0 30rpx 20rpx;
		background: #e5e7eb;
		border-radius: 15rpx;
		padding: 8rpx;
		position: relative;
		z-index: 2;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			border-radius: 12rpx;
			transition: all 0.3s ease;

			&.active {
				background: linear-gradient(to right, #93f94e, #faf859) !important;
				box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);

				.tab-text {
					color: #000000;
					font-weight: 700;
				}
			}

			.tab-text {
				color: #2C3E50;
				font-size: 28rpx;
				font-weight: 500;
				text-transform: uppercase;
				letter-spacing: 1rpx;
				font-family: 'Fredoka One', Arial, sans-serif;
			}
		}
	}

	
	.history-table-container {
		margin: 0 30rpx 30rpx;
		background: #ffffff;
		border-radius: 20rpx;
		height: 800px;
		overflow: hidden;
		position: relative;
		z-index: 2;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

		.table-body {
			.table-row {
				display: flex;
				align-items: center;
				padding: 25rpx 20rpx;
				border-bottom: 1rpx solid #F0F0F0;
				transition: background-color 0.3s ease;

				&:hover {
					background-color: #F8F9FA;
				}

				&:last-child {
					border-bottom: none;
				}
			.number-badge {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

						&.green-number {
							background: #4CAF50;
						}

						&.red-number {
							background: #FF5722;
						}

						&.purple-number {
							background: #9C27B0;
						}

						.number-text {
							color: #ffffff;
							font-size: 28rpx;
							font-weight: 700;
						}
					}s
				.rank-cell {
					width: 80rpx;
					display: flex;
					justify-content: flex-start; 
					align-items: center;
				}

				.identifier-cell {
					flex: 1;
					display: flex;
					justify-content: flex-start; 
					align-items: center;
					padding-left: 20rpx;

					.identifier-text {
						color: #2C3E50;
						font-size: 26rpx;
						font-weight: 500;
						text-align: left;
					}
				}

				.amount-cell {
					width: 200rpx;
					display: flex;
					justify-content: flex-end; 
					align-items: center;
					padding-right: 20rpx;

					.amount-text {
						color: #000000;
						font-size: 36rpx;
						font-weight: 800;
						text-align: right;
						font-family: 'Courier New', monospace !important;
					}
				}
			}
		}

		.load-more-section {
			padding: 30rpx;
			text-align: center;
			background: #F8F9FA;

			.load-more-button {
				display: inline-block;
				padding: 20rpx 40rpx;
				background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
				border-radius: 25rpx;
				box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.98);
				}

				.load-more-text {
					color: #ffffff;
					font-size: 28rpx;
					font-weight: 600;
					text-transform: uppercase;
					letter-spacing: 1rpx;
				}
			}
		}
	}

	@media (max-width: 750px) {
		.history-table-container {
			height: 500px;
		}
	}
</style>